<template>
  <div class="page">
    <div class="intro-part part-one">
      <img src="@/assets/images/eye_icon.png"/>
      <p class="intro-text-1">Premius Market</p>
      <p class="intro-text-2">Trade Airdrop Allocations, Points and Tokens. </p>
      <p class="intro-text-2">All in One Place. </p>
      <p class="intro-text-3">
        Unlock early liquidity of airdrop assets in the most secure and capital-efficient way. 
      </p>
      <div class="trade-btn">Trade Now</div>
    </div>
    <div class="intro-part part-two">
      <img src="@/assets/images/screenshot_img.png"/>
      <div class="text-con">
        <p class="intro-text">Trade airdrop pre-TGE</p>
        <p class="intro-text">tokens and points with low fees, </p>
        <p class="intro-text">deep liquidity and most secure guarantee.</p>
      </div>
    </div>
    <div class="part-three">
      <ul>
        <li>
          <p class="item-name">Total Trading Volume</p>
          <p class="item-data">$120,1M</p>
        </li>
        <li>
          <p class="item-name">Total Users</p>
          <p class="item-data">172,893</p>
        </li>
        <li>
          <p class="item-name">Revenue Shared</p>
          <p class="item-data">$1M+</p>
        </li>
      </ul>
    </div>
    <div class="intro-part part-four">
      <p class="part-title">
        <span class="white">Premius</span>
        <span>Features</span>
      </p>
      <ul>
        <li>
          <img src="@/assets/images/icon_1.png"/>
          <p class="name">Security</p>
          <p class="desc">Fully Decentralized, Self Custody, </p>
          <p class="desc"> Audited Smart Contract</p>
        </li>
        <li class="line_img"></li>
        <li>
          <img src="@/assets/images/icon_2.png"/>
          <p class="name">Simplicity and Cheap</p>
          <p class="desc">Seamless and User-friendly Interface</p>
          <p class="desc">with Low Fees</p>
        </li>
        <li class="line_img"></li>
        <li>
          <img src="@/assets/images/icon_3.png"/>
          <p class="name">Prime Experience</p>
          <p class="desc">Credit-based, Dynamic Collateral for</p>
          <p class="desc">High Liquidity and Capital-Efficiency</p>
        </li>
        <li class="line_img"></li>
        <li>
          <img src="@/assets/images/icon_4.png"/>
          <p class="name">Premier Markets</p>
          <p class="desc">Selected Top Projects</p>
          <p class="desc">with Good Rewards</p>
        </li>
      </ul>
    </div>
    <div class="intro-part part-five">
      <p class="part-title">
        <span class="white">Robust Economic Model</span>
        <br />
        <span>Better Liquidity & Flexibility</span>
      </p>
      <div class="flow">
        <img src="@/assets/images/part-bg.png"/>
      </div>
    </div>
    <div class="intro-part part-six">
      <p class="part-title">
        <span class="white">Future</span>
        <span>Roadmap</span>
      </p>
      <ul>
        <li>
          <div class="stage-con">
            <p class="stage">V1 Stage</p>
          </div>
          <p class="desc">
            <img src="@/assets/images/check-icon.png"/>
            Product Launch
          </p>
          <p class="desc">
            <img src="@/assets/images/check-icon.png"/>
            Premius Sparks Incentive System
          </p>
        </li>
        <li>
          <div class="stage-con">
            <p class="stage">V2 Stage</p>
          </div>
          <p class="desc">
            <span class="square"></span>
            Expanded Trading Assets and Points
          </p>
          <p class="desc">
            <span class="square"></span>
            Proof-of-Deposit NFT and Marketplace for Buyer
          </p>
          <p class="desc">
            <span class="square"></span>
            Flexible Staking Ratios for Seller
          </p>
        </li>
        <li>
          <div class="stage-con">
            <p class="stage">V3 Stage</p>
          </div>
          <p class="desc">
            <span class="square"></span>
            Yield Incentive for Both Buyer and Seller
          </p>
          <p class="desc">
            <span class="square"></span>
            Credit-based Dynamic Collateral
          </p>
          <p class="desc">
            <span class="square"></span>
            B2C + C2C Platform
          </p>
        </li>
      </ul>
    </div>
    <div class="intro-part part-seven">
      <p class="part-title">
        <span class="white">Strategic</span>
        <span>Partners</span>
      </p>
      <ul>
        <li><img src="@/assets/images/partners_1.png"/></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
       <!-- <li><img src="@/assets/images/partners_2.png"/></li>
        <li><img src="@/assets/images/partners_3.png"/></li>
        <li><img src="@/assets/images/partners_4.png"/></li>
        <li><img src="@/assets/images/partners_5.png"/></li> -->
      </ul>
    </div>
    <div class="intro-part part-eight">
      <p class="part-title">
        <span class="white">Audit</span>
        <span>Paper</span>
      </p>
      <ul>
        <li>
          <img src="@/assets/images/line_top_img.png"/>
          <div>
            <p class="title">Audited by Scalebit</p>
            <p class="content">
              <img src="@/assets/images/audit_1.png"/>
            </p>
            <div class="view-btn" @click="toExplorerUrl('https://movebit.xyz/reports/Premius-Market-Final-Audit-Report.pdf')">
              <span >Click to view</span>
              <img src="@/assets/images/view_icon.png"/>
            </div>
          </div>
        </li>
        <li>
          <img src="@/assets/images/line_top_img.png"/>
          <div>
            <p class="title">Audited by Slowmist</p>
            <p class="content">
              <img src="@/assets/images/audit_2.png"/>
            </p>
            <div class="view-btn">
              <span>Coming Soon</span>
              <img src="@/assets/images/view_icon.png"/>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <Footer />
  </div>
</template>

<script>
import { mapStores } from "pinia";
import Footer from "@/components/Footer.vue";
export default {
  data () {
    return {}
  },
  components: { Footer },
  methods: {
    toExplorerUrl(url) {
  	window.open(url);
    }
  }
}
</script>

<style lang='scss' scoped>
@import "@/styles/base.scss";
.page {
  background-image: url("@/assets/images/premius_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: #1f2023;
  min-height: 100vh;
  padding-top: 1rem;
  p, ul {
    margin: 0;
  }
  ul {
    list-style: none;
  }
  .intro-part {
    padding: 1.14rem 2.86rem 0 2.86rem;
    text-align: center;
    .blank10 {
      height: .11rem;
    }
    .part-title {
      margin-bottom: 1.43rem;
      margin-top: 1rem;
      line-height: .7rem;
      span {
        font-size: .55rem;
        font-weight: bold;
        background: linear-gradient(0deg, #2599FA 0%, #3BEFE4 100%);
        background-clip: text;
        color: transparent;
        &.white {
          color: #fff;
          background: none;
          margin-right: .31rem;
        }
      }
    }
    &.part-one {
      img {
        width: .66rem;
        margin-bottom: .7rem;
      }
      .intro-text-1 {
        font-size: .77rem;
        color: #fff;
        font-weight: bold;
      }
      .intro-text-2 {
        font-size: .55rem;
        background-image: linear-gradient(to right, #2599FA, #3BEFE4);
        background-clip: text;
        color: transparent;
        font-weight: bold;
      }
      .intro-text-3 {
        font-size: .22rem;
        color: #fff;
      }
      .trade-btn {
        width: 2.26rem;
        height: .55rem;
        border-radius: $border-radius;
        background: $primaryColor;
        text-align: center;
        line-height: 0.55rem;
        font-weight: 500;
        color: #fff;
        margin: .88rem auto 0 auto;
        cursor: pointer;
        font-size: .2rem;
      }
    }
    &.part-two {
      img {
        width: 100%;
        padding: .02rem;
      }
      .text-con {
        margin-top: -.41rem;
      }
      .intro-text {
        color: #18191C;
        font-size: .51rem;
        font-weight: bold;
      }
    }
    &.part-four {
      ul {
        display: flex;
        justify-content: space-around;
        li {
          text-align: left;
        }
        img {
          width: 1.1rem;
          margin-bottom: .33rem;
        }
        .name {
          color: #fff;
          font-size: .24rem;
        }
        .desc {
          font-size: .15rem;
          color: #898989;
          
        }
      }
      .line_img {
        background: url("@/assets/images/line_img.png") no-repeat;
        background-size: 100% 100%;
        width: .04rem;
        height: 2.75rem;
      }
    }
    &.part-five {
      .flow {
        margin: 0 .1rem;
        width: 100%;
        height: 3.85rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    &.part-six {
      ul {
        display: flex;
        li {
          background-color: #2A2C30;
          flex: 1;
          margin-right: .23rem;
          border: solid .01rem #171719;
          padding: .34rem .23rem;
          border-radius: .09rem;
          text-align: left;
          &:last-child {
            margin-right: 0;
          }
          .stage-con {
            border-radius: .44rem;
            margin-bottom: .3rem;
            width: 1.35rem;
            height: .44rem;
            border: .01rem solid transparent;
            background-clip: padding-box, border-box;
            background-origin: padding-box, border-box;
            background-image: linear-gradient(to right, #2A2C30, #2A2C30),
                              linear-gradient(to right, #2599FA, #3BEFE4);
          }
          .stage {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: .44rem;
            font-size: .2rem;
            background: linear-gradient(0deg, #2599FA 0%, #3BEFE4 100%);
            background-clip: text;
            color: transparent;
            position: relative;
          }
          .desc {
            font-size: .15rem;
            color: #898989;
            margin-bottom: .15rem;
            &:last-child {
              margin-bottom: 0;
            }
            img {
              width: .24rem;
              margin-right: .12rem;
            }
            .square {
              display: inline-block;
              width: .06rem;
              height: .06rem;
              background-color: #A8A8A8;
              margin-right: .12rem;
            }
          }
        }
      }
    }
    &.part-seven {
      ul {
        display: flex;
        li {
          flex: 1;
          margin-right: .26rem;
          &:last-child {
            margin-right: 0;
          }
          img {
            width: 100%;
          }
        }
      }
    }
    &.part-eight {
      padding-bottom: 1.6rem;
      ul {
        display: flex;
        li {
          flex: 1;
          margin-right: .8rem;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          div {
            margin-top: .11rem;
          }
          img {
            width: .04rem;
            height: 2.3rem;
            // object-fit: cover;
            margin-right: .3rem;
          }
          .title {
            color: #fff;
            font-size: .2rem;
            text-align: left;
            margin-bottom: .33rem;
          }
          .content {
            font-size: .18rem;
            color: #898989;
            text-align: left;
            line-height: .27rem;
            img {
              width: .77rem;
              height: .77rem;
              object-fit: cover;
              border-radius: 50%;
            }
          }
          .view-btn {
            font-size: .2rem;
            color: #fff;
            text-align: left;
            cursor: pointer;
            margin-top: .33rem;
            img {
              width: .55rem;
              height: .11rem;
              margin-left: .26rem;
              object-fit: cover;
            }
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
  .part-three {
    width: 100%;
    height: 2.2rem;
    background: url("@/assets/images/data_bg.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 1.72rem;
    ul {
      display: flex;
      justify-content: space-around;
      li {
        padding-top: .5rem;
        p {
          color: #fff;
          text-align: center;
        }
        .item-name {
          font-size: .24rem;
        }
        .item-data {
          font-size: .62rem;
          font-weight: bold;
        }
      }
    }
  }
}
</style>